Introduction

I couldn't have done this tutorial without the contributions of KillzXGaming for Switch Toolbox, as well as those who came before me to look into menu/bflan shit like CSK, Supplebones, Kalomaze, and zrksyd. Thank you all for your contributions to this massive effort.

BFLAN files are the UI equivalent of .nuanmb files, in that they contain all (yes, *all*) UI related animations. This tutorial is aimed to help you 1) get a greater understanding of what purpose BFLAN files serve, as well as 2) how you can go about editing them effectively & bypass the annoying aspects of Switch Toolbox. It’s not super involved and despite the size of this tutorial, it isn’t very complicated. You can do it!

Why Toolbox?

Unlike SLE, Toolbox shows textures, can preview animations, and most importantly, has a more user friendly UI for animation editing. You can try editing them in SLE if you'd like, and much of the info in this tutorial will carry over to SLE, but this tutorial is not designed with it in mind (especially concerning animation types, as they are named differently. if you'd like, you can cross reference the name of the anim type in toolbox and its name in a hex editor to find what SLE will name it).

Required Knowledge

Glossary

Categories of BFLAN Animations & Explanations

Tag Info 

Animation Info

Animation Group (Part 1)

Animation Group (Part 2)

Pane-Based Animation Types


NOTICE: Toolbox support for Material animations is...lacking. You cannot assign targets for the following [MaterialColor, PerCharacterTransformCurve, AlphaTest], which means you can only edit pre-existing ones unless you hex edit it in (which i will not be covering for this tutorial, as it's easy to break things when trying to add types via hex). However, since you can edit Alphas and Pane colors with their Pane equivalents, the major uses for Material Based Animations are TexturePattern, TextureSRT, and IndTextureSRT.

"Mayamia, there's something here called [SEQUENCE OF FOUR CAPITAL LETTERS STARTING WITH F (it's probably not FUCK but it's a possibility)]! What does this mean?"

It means that Toolbox doesn't recognize it and thus reads it directly out the hex as it's displayed there. I've seen one that's text related, which may control the text lighting up or something. need further testing. And as previously mentioned, you'll have to actually add that yourself via hex (which i am not going to explain here).

Common Toolbox Issues & Fixes:

  1. My texture is lower quality than it should be!
  1. Reimport it.
  1. My game crashed after I deleted a pane, material, texture, or any other file present in the vanilla game!
  1. Solution: Put the vanilla one back in. You may have to go into switch layout editor, fix the material # for the pane, and then it may work. But oftentimes the layout.arc is incredibly fickle, and for this reason i recommend blanking things that you don't need out by changing the pane's alpha to 0, replacing the texture with a 1x1 black square, setting visibility to 0, etc, and for removing animations, just removing everything under the Animation Type.
  1. Toolbox stopped showing me the textures right and some stuff looks all funky now
  1. Close and reopen toolbox after saving your progress, or find the nearest Part pane, type any character under the “Part” tab, and then delete it. May not work when viewing TexturePattern textures.
  1. Toolbox is giving me a weird error and a big red X is over the BFLYT preview!
  1. This could be a number of things, but the common ways to fix this is by
  1. Opening it in SLE and making sure to fix the material index number (it'll bug out and change it to 65535 or something when u delete shit u arent supposed to)
  2. Put the layout.arc in a different folder, delete the OG one, and open it from there. I know, it's really fucking weird, but it be like that sometimes (and u can put it back when u wanna use it, it’ll work in-game).
  1. I exported and renamed a BFTEX texture, but when I imported it, the name didn’t change in the tool
  1. You have to manually change the name of each BFTEX texture inside Toolbox or another program. BFTEX files are named internally, so the filename doesn’t change as easily as changing the file name in windows once its been formatted to BFTEX.

.

Basic Editing Tips:

Advanced Editing Tips

The Actual Tutorial Starts Here

This is covered in KillzXGaming’s BFLYT Tutorial, but for completeness I’ll post my own shortened version here. To begin editing a BFLAN file, you’ll need to first find the layout.arc that you want to edit. Those are the files that control/contain Smash Ultimate’s GUI, including almost every menu, battle HUDs, the title screen, etc.

In your dump, location the ui/layout folder. There are several subfolders for this, and I’ll try to label some of them here. All sub-sections of a folder will list some commonly edited/interesting ones of my choosing, but not all of them. Treat this as a preview.

Once you find what you’re looking for, extract the file from ArcExplorer and drag it into Toolbox. You’ll see a few folders, but all we need are the “anim,”  “timg,” and “blyt” ones. In the blyt folder, there will be several BFLYT files in a seemingly random order. If your file has a bunch of BFLYT files, i would suggest using the “View” tab to sort them alphabetically, and if you know what you’re looking for already, use the “Search” feature to find it. The easiest way to find what you’re looking for, especially for big files, will be outlined here:

“Where’s That At?” (How to find that thing you wanna animate)

        Using the main_menu’s layout.arc, I’ll walk you step by step in finding something specific that we can animate: the “Training Mode” button. So, walk with me here.

 



 

Okay, Seriously, This is the Actual Tutorial Now

  1. First, open up the BFLYT that your animation influences by (if the animation’s prefix is the same as the BFLYT name, you should be good. i.e “main_menu_in” influences the “main_menu.bflyt,” and “other_top_btn3_01_BlinkOn.bflan” influences “other_top_btn3_01.bflyt”)
  2. Open the animation, left click “Tag Info,” and open the (Collection) part on the right hand side. You’ll be shown some text which tells you the Animation Group that the animation uses, as shown here:

  1. “blink_grp” is the name of the Animation Group, which you’ll see in this section of the BFLYT editor


  1. Open the (Collection) and you’ll see a list of panes inside the file. Now add what you need, if you need to, and you’re set! now you can start cooking :3

  1. For this example, I will demonstrate how to use PaneSRT to make the Training Mode button’s dumbbell rotate upon selection.
  2. First, find the relevant bflyt (which we found out was “other_top_btn3_01”) and the animation we want to edit. I’ll use this one, since the animation player in Toolbox shows the icon glowing up when i click this animation and press the play button at the bottom.

  1. Next, we double click this .bflan to get the actual animation to open. This window will pop up, and we can go ahead to the relevant [Pane Name]s: icon_on and icon_off. But first, we should note the frame count, which is 2. That isn’t enough for a whole spinny animation, is it? I don’t think so. So let’s first change that to 60.

  1. If you read through the bibliography, you’ll know that the first step is to edit the “End” count. So click on Tag Info, change the End count to something bigger (i’m choosing 112 to get that clean 60 frame count) and then edit the Frame Count value in Animation Info to match what you’ve got set in Tag Info (so I would put 60 here, as shown).

  1. Cool! So now we have some room. To tell the game you want the icon to spin, you should first set two frames: one frame at 0 to set as the start point, and one frame at 60 to set the end point. You don’t always need to create a starting position, but i like to do it so the animation can reset properly. Here’s what the animation looks like (frame data wise) after i put it in the game:

  1. And here’s what it looks like in action, inside the game itself:

  1. So boom! Now you know how to do a basic PositionSRT edit :D

  1. I’ll be using the Amogus Twerk Loading Icon mod for this example.
  2. The first thing you must do is get the frames. There are several online programs you can use for this, but if you’re using a GIF i recommend dragging and dropping into photoshop, then hit  File > Export > Export Layers To Files (PNG or JPEG works, it’s up to you). I would highly recommend against using a gif or video with lots and lots of frames, because you have to format each image/insert each frame individually. Keep in mind that Photoshop may export the frames in reverse, which is hella annoying but won’t be an issue in the long run, as long as you remember that the numbers are in reverse.
  3. Once you have all the individual frames, you’ll need to grab all their names. You’ll be putting them into a list later, so you may as well grab them now. There are a few ways I’m sure you could do this, but I use Bulk Rename Utility. You can open up the folder containing all the images, select them all, then right click through this context menu & hit “Filename,” so basically do this:

  1. Now paste this list somewhere and don’t lose it, you’ll need it later on.
  2. Now, open up the layout.arc you want to add a gif to. For the amogus twerking icon, I used the layout.arc in ui>layout>system>loading>loading.
  3. Speaking of which, here’s the fun part: importing the textures into toolbox :D
  4. Open up the timg folder I mentioned waaaaay earlier, double click “Combined.bntx,” and then right click > Import Textures. You’ll want to navigate to the folder you stored your textures in from earlier, and then select all of them. Toolbox may take a second to load them in, but it’s okay with mass import.

  1. As you can see, (no, keep your eyes on the right!) Mip Count is 1 and Swizzle is set to 0 during the import process. You’ll have to set this up for every texture you use, as they’re set to 9 mips by default.
  2. You don’t have to do this, but in order to avoid potential conflicts with other animations, I created a new Picture Pane instead of using an existing one, changed the size to something larger than the 30x40 they assign it by default, and dragged it onto the loading_pos Null Pane. Drag and dropping panes on top of a different one will put the dragged & dropped pane to the bottom of the “hierarchy,” which makes that pane display over any pane above it. Panes! Lots of them. Sorry if that was confusing, tl;dr drag and drop saves lives.

  1. Meet amogus_00, which i named for the sake of organization. I’m not 100% sure, but I don’t think you actually need to follow any specific naming conventions so long as you name everything properly when it comes to the animation part. You’ll want to assign one of the frames of your gif mod to this, as it’ll be what displays when the animation first starts, which you can do by editing in the name in the Texture Maps section.
  1. Now, reference the “Adding Panes to Animation” section to add your Pane to the animation you’d like to use, and then open that animation up so we can wrap this up.
  1. Then, open up the list of names you ported and copy-paste that into the window that comes up with Textures -> Collections, and then paste it

  1. Keep in mind that the order here is the order in which the game calls them, starting from 0 to whatever. So if you assign 5 as the first frame’s value, it will load the 6th item on this list. It’s not based on name, thank god, but just be mindful that the list order is very important.
  2. Assuming you’ve already added your pane to the list, add the Target and Type. it should look something like this (excluding the keyframes):

  1. Ensure that you’re using TexturePattern and Image1 only, as the others don’t seem to work properly for this. Now, and this is key, make sure that Image1’s curve type is Step. Otherwise, this will not work.

  1. Now, add the keyframes by selecting Image1 and using Ctrl-A. You should be able to keep slope at 0, and set each “value” to the corresponding position of its frame on the list you copy-pasted. Here’s an example of what a keyframe’s data may look like, taken from the 2nd keyframe of the amogus mod:

  1.  Once again, the Frame represents what frame it’ll play on (so if you set Start to 50 and End to 112, and then set the Frame Count to 60, frame 2 would essentially be frame 52 out of that 112) and the Value represents the placement of the frame’s name on that list you put in (Collections).
  2. Once you’re done, you should be able to save (PLEASE SAVE), exit out of toolbox, load everything back in, and then preview it in the tool.
  3. If it works, then it should also work in game.

End

And that’s a wrap! Congrats!! I hope this tutorial has helped you in some way. Have a good one ^^